<template>
  <audio
          ref="audioref"
          :src="playSrc"
          controls
          @ended="playEnded"
          style="margin-top: 5px; width: 400px; height: 10px" />
</template>

<script>
  import {ref} from 'vue'
  export default {
    name: "AudioPlayer",
    props: {
      playSrc: {
        type: String,
        default: undefined
      }
    },
    emits: ['endedPlay'],
    setup(props, context) {
        const audioref=ref([])
        const audioplay = () => {
          audioref.value.play();
        }
        const audiopause = () =>{
          audioref.value.pause()
        }
        const playEnded = () => {
          context.emit('endedPlay')
        }
        return{
          audioref,
          audioplay,
          audiopause,
          playEnded,
        }
    }
  }
</script>

<style scoped>

</style>
